<template>
    <div class="add-shop-container">
        <h1>添加商品</h1>
        <el-input v-model="goodsName" placeholder="商品名称"></el-input>
        <el-input v-model="goodsPrice" placeholder="商品价格"></el-input>
        <el-button @click="addShopList">添加到购物列表</el-button>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                goodsName: '',
                goodsPrice: ''
            }
        },
        methods: {
           addShopList () {
               let obj = {
                    id: new Date().getTime(),
                    goodsName: this.goodsName,
                    goodsPrice: this.goodsPrice,
                    count: 1
               }

                this.$store.commit('addShopList', obj)

                this.goodsName = ''
                this.goodsPrice = ''
           }
        }
    }
</script>

<style scoped lang="scss">
.add-shop-container {
    flex: 1;
    height: 100%;
    border-right: 2px solid #e4393c;
}
</style>